$(function(){
    /*
    需求：
    1.获取服务器数据，渲染至页面-->封装函数
       1.1 创建一个空数组
       1.2 遍历服务器数据，新增tr节点至数组-->forEach(ele=>{})
       1.3 将数组数据渲染至页面  join('')
    2.点击添加分类，新增图书
       2.1 动态新增一个弹出框(addForm表单)-->全局变量存储弹出层序号，关闭需要用
       2.2 发送form表单数据至后台
       2.3 关闭弹出层
       2.4 更新页面
    3.点击tr内的修改按钮，更新已有的图书数据-->事件委托
       3.1 动态新增一个弹出框(editForm表单)
       3.2 自动获取后台数据渲染至表单
       3.3 将修改后的数据发送至服务器
       3.4 关闭弹出层
       3.5 更新页面
    4.点击tr内的删除按钮，删除已有的图书数据
       4.1 询问框
       4.2 提交数据
       4.3 刷新页面
    */ 
    initArtCateList()
// 1.获取服务器数据，渲染至页面-->封装函数
    function initArtCateList(){
        axios({
            method:'GET',
            url:'/my/article/cates',
        }).then(({data:res})=>{
            // console.log(res)
            let arr =[]
        //1.2 遍历服务器数据，新增tr节点至数组-->forEach(ele=>{})
            res.data.forEach(ele=>{
            // 加判断过滤脏数据
                if(ele.Id<0) return  //forEach循环内使用return不会直接退出函数，而是等循环完成再结束函数
                arr.push(`
                    <tr>
                        <td>${ele.Id}</td>
                        <td>${ele.name}</td>
                        <td>${ele.alias}</td>
                        <td>
                            <button data-id="${ele.Id}" type="button" class="layui-btn layui-btn-xs editBtn">修改</button>
                            <button data-id="${ele.Id}" type="button" class="layui-btn layui-btn-danger layui-btn-xs delBtn">删除</button>
                        </td>
                    </tr>
                `)
            })
        //1.3 将数组数据渲染至页面  join('')
        $('tbody').empty().html(arr.join(''))
        })
    }

// 2.点击添加分类，新增图书
    let addIndex = null
    $('.addBtn').on('click',function(){
    // 2.1 动态新增一个弹出框(addForm表单)
        addIndex = layui.layer.open({
        type: 1, 
        title:'添加文章分类',
        area: ['500px', '260px'],
        content: `
            <form id="addForm" class="layui-form" action="">
            
                <div class="layui-form-item">
                    <label class="layui-form-label">分类名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
            
                <div class="layui-form-item">
                    <label class="layui-form-label">分类别名</label>
                    <div class="layui-input-block">
                        <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
            
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn addBtn" lay-submit lay-filter="formDemo">确认添加</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>` 
      });
    })
    // 2.2 创建弹出层完毕，收集用户输入数据发送请求 -->动态创建的元素需要利用事件委托
    $('body').on('submit','#addForm',function(e){
        e.preventDefault()
        // 错误点一：使用axios.post简写，会报commen文件中indexOf is not a function
        axios({
            method:'POST',
            url:'/my/article/addcates',
            data:$('#addForm').serialize()
        }).then(({data:res})=>{
            console.log(res)
            if(res.status) return layui.layer.msg(res.message)
            layui.layer.msg('恭喜您，新增图书分类成功')
            // 关闭弹出层
            console.log(addIndex);
            layui.layer.close(addIndex)
            // 更新页面
            initArtCateList()
        })
    })

// 3.点击tr内的修改按钮，更新已有的图书数据-->事件委托
    let editIndex = null
    $('tbody').on('click','.editBtn',function(){
    //3.1 动态新增一个弹出框(editForm表单)
        editIndex=layui.layer.open({
            type: 1, 
            title:'添加文章分类',
            area: ['500px', '260px'],
            content: `
                <form id="editForm" class="layui-form" action="" lay-filter="editForm">
                    <input type="hidden" name="Id">
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入分类名称" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                
                    <div class="layui-form-item">
                        <label class="layui-form-label">分类别名</label>
                        <div class="layui-input-block">
                            <input type="text" name="alias" required lay-verify="required" placeholder="请输入分类别名" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn editBtn" lay-submit lay-filter="formDemo">确认添加</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>` 
        })
    //3.2 自动获取后台数据渲染至弹出层表单
        axios({
            method:'GET',
            // 注意，此处根据开发文档，需要传输id才能实现修改功能
            // 1. 在自动渲染生成tr时，将id绑定至修改按钮的自定义属性
            // 2. 在此处发送请求时，将自身自定义属性上的id取出来，添加至url-->
            url:'/my/article/cates/'+$(this).attr('data-id'),
        }).then(({data:res})=>{
            // console.log(res)
            if(res.status) return layui.layer.msg(res.message)
            // 使用layui自带的表单赋值方法给修改表单进行赋值
            // 此处需要给动态新增的修改表单使用隐藏域(hidden)接收id，提交数据需要使用
            layui.form.val('editForm',res.data)
        })
    })
    //3.3 将修改后的数据发送至服务器-->事件委托,默认事件
    $('body').on('submit','#editForm',function(e){
        e.preventDefault()
        axios({
            method:'POST',
            url:'/my/article/updatecate',
            data:$(this).serialize()
        }).then(({data:res})=>{
            // console.log(res)
            if(res.status) return layui.layer.msg(res.message)
            // 关闭弹出层修改表单，渲染页面
            layui.layer.close(editIndex)
            initArtCateList()
        })
    })

// 4.点击tr内的删除按钮，更新已有的图书数据-->事件委托
    $('tbody').on('click','.delBtn',function(){
        // 弹窗询问：注意，在layui的弹窗询问中会改变this指向
        let id = $(this).attr('data-id')
        // console.log($(this).attr('data-id'))   ==>id
        layer.confirm('是否删除该文章类别?', {icon: 3, title:'提示'}, function(index){
        // console.log($(this).attr('data-id'))  ==>undefined
            axios({
                method:'GET',
                url:'/my/article/deletecate/'+id,
            }).then(({data:res})=>{
                console.log(res);
                if(res.status) return layui.layer.msg(res.message)
                // 删除成功，更新页面
                layui.layer.msg('恭喜您，删除分类成功')
                initArtCateList()
            })
            layer.close(index);
        });
    })
})